<template>
	<view>
		<!-- 头部 -->
		<u-navbar leftIcon=" " :placeholder="true" title="我的" bgColor="rgb(18,151,254)" titleStyle="color:rgb(255,255,255)">
		</u-navbar>
		<image class="img-top-bg" :src="iconback" mode="widthFix"></image>
		<view class="container p30">
			<view class="user" v-if="token">
				<view class="flex-box" @tap="jumpToPages" data-jump_type="2" data-url="/pages/member/base_info/base_info">
					<view class="flex-grow-1" @tap="jumpToPages" data-jump_type="2" data-url="/pages/member/base_info/base_info">
						<view class="flex-box mb45">
							<view class="fs40 col10 fwb">{{userinfo.nickname}}</view>
							<view class="fs24 col89 ml20">{{userinfo.mobile}}</view>
						</view>
						<view class="id-box id2 flex-center" v-if="userinfo.userprofile.is_broker == 2">
							<image src="/static/icon/icon_id2.png" mode="aspectFit"></image>
							<view>经纪人</view>
						</view>
						<view class="id-box id3 flex-center" v-else-if="userinfo.userprofile.is_broker == 1">
							<image src="/static/icon/icon_id3.png" mode="aspectFit"></image>
							<view>房东</view>
						</view>
						<view class="id-box id1 flex-center" v-else>
							<image src="/static/icon/icon_id1.png" mode="aspectFit"></image>
							<view>用户</view>
						</view>
					</view>
					<image class="img-head" :src="userinfo.avatar" mode="aspectFill"></image>
				</view>
				<!-- 经纪人 -->
				<!-- <view class="flex-box col10 tc mt35" v-if="userinfo.userprofile.is_broker == 2"> -->
				<view class="flex-box col10 tc mt35" v-if="false">
					<view class="flex1" @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/broker_income/broker_income">
						<view class="mb20">
							<text class="fs24">¥</text>
							<text class="fs34">{{userinfo.userprofile.total_borker_money}}</text>
						</view>
						<view class="fs24 cola">经纪人收益</view>
					</view>
					<view class="flex1" @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/broker_income/broker_income">
						<view class="mb20">
							<text class="fs24">¥</text>
							<text class="fs34">{{userinfo.userprofile.borker_money}}</text>
						</view>
						<view class="fs24 cola">可提现</view>
					</view>
					<view class="flex1" @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/agent_house/agent_house">
						<view class="mb20">
							<text class="fs34">{{userinfo.agent_rental_count}}</text>
						</view>
						<view class="fs24 cola">代理房源</view>
					</view>
					<view class="flex1" @click="jumpToPages" data-jump_type="2" data-url="pages/member/my_clients/my_clients">
						<view class="mb20">
							<text class="fs34">{{userinfo.valid_count}}</text>
						</view>
						<view class="fs24 cola">有效客户</view>
					</view>
				</view>
				<!-- 房东 -->
				<!-- <view class="flex-box col10 tc mt35" v-if="userinfo.is_broker >= 1"> -->
				<view class="flex-box col10 tc mt35" v-if="false">
					<view class="flex1" @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/rental_income/rental_income">
						<view class="mb20">
							<text class="fs24">¥</text>
							<text class="fs34">{{userinfo.userprofile.total_lessor_money}}</text>
						</view>
						<view class="fs24 cola">房东收益</view>
					</view>
					<view class="flex1" @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/rental_income/rental_income">
						<view class="mb20">
							<text class="fs24">¥</text>
							<text class="fs34">{{userinfo.userprofile.lessor_money}}</text>
						</view>
						<view class="fs24 cola">可提现</view>
					</view>
					<view class="flex1" @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/rental_income/rental_income">
						<view class="mb20">
							<text class="fs24">¥</text>
							<text class="fs34">{{userinfo.userprofile.frezze_lessor_money}}</text>
						</view>
						<view class="fs24 cola">冻结中</view>
					</view>
					<view class="flex1" @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/rental_income/rental_income">
						<view class="mb20">
							<text class="fs24">¥</text>
							<text class="fs34">{{userinfo.userprofile.lessor_withdraw_money}}</text>
						</view>
						<view class="fs24 cola">提现审批</view>
					</view>
				</view>
			</view>
			
			<view class="user" v-else>
				<view class="flex-box" @tap="jumpToPages" data-jump_type="2">
					<view class="flex-grow-1">
						<view class="flex-box mb45">
							<view class="fs40 col10 fwb">游客~</view>
						</view>
						<view class="id-box id1 flex-center">
							<image src="/static/icon/icon_id1.png" mode="aspectFit"></image>
							<view>去登录</view>
						</view>
					</view>
					<image class="img-head" :src="userinfo.avatar" mode="aspectFill"></image>
				</view>
			</view>

			<!-- 经纪人 -->
			<!-- <view class="info-box" v-if="userinfo.is_broker == 2"> -->
			<view class="info-box" v-if="false">
				<block v-for="(item,index) in monthData">
				<view class="flex-box mb40">
					<view class="fs36 col10 flex-grow-1">{{item.name}}</view>
					<view class="fs26 col89" @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/more_information/more_information">查看更多+</view>
				</view>
				<view class="flex-box tc">
					<view class="flex-grow-1">
						<view class="mb10 col-price">
							<text class="fs26">¥</text>
							<text class="fs36">{{item.money}}</text>
						</view>
						<view class="fs26 col89">新增收益</view>
					</view>
					<view class="flex-grow-1">
						<view class="fs36 mb10 col-price">
							{{item.rental_num}}
						</view>
						<view class="fs26 col89">新增房源</view>
					</view>
					<view class="flex-grow-1">
						<view class="fs36 mb10 col-price">
							{{item.user_num}}
						</view>
						<view class="fs26 col89">新增客户</view>
					</view>
					<view class="flex-grow-1">
						<view class="fs36 mb10 col-price">
							{{item.view_num}}
						</view>
						<view class="fs26 col89">新增带看</view>
					</view>
				</view>
				</block>
			</view>
			<!-- 房东/经纪人/个人 -->
			<view class="data-box mb30" v-if="userinfo.renter_pay_switch==1 && userinfo.renter_retail_switch == 1">
				<view class="flex-box mb40" >
					<view class="flex-box flex-grow-1">
						<!-- <view class="fs34 colf">我的收益</view> -->
						<view class="fs34 colf">佣金收益</view>
					</view>
					<view class="nav-cash" @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/commission_income/commission_income" hover-class="none">申请提现</view>
				</view>
				<view class="flex-box colf tc">
					<view class="flex1" @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/commission_income/commission_income">
						<view class="mb15">
							<text class="fs24">¥</text>
							<text class="fs40">{{userinfo.userprofile.total_money}}</text>
						</view>
						<view class="fs24 cola">总收益</view>
					</view>
					<view class="flex1" @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/commission_income/commission_income">
						<view class="mb15">
							<text class="fs24">¥</text>
							<text class="fs40">{{userinfo.userprofile.frezze_money}}</text>
						</view>
						<view class="fs24 cola">冻结中</view>
					</view>
					<view class="flex1" @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/commission_income/commission_income">
						<view class="mb15">
							<text class="fs24">¥</text>
							<text class="fs40">{{userinfo.userprofile.withdraw_money}}</text>
						</view>
						<view class="fs24 cola">提现审核</view>
					</view>
					<view class="flex1" @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/commission_income/commission_income">
						<view class="mb15">
							<text class="fs24">¥</text>
							<text class="fs40">{{userinfo.userprofile.money}}</text>
						</view>
						<view class="fs24 cola">可提现</view>
					</view>
				</view>

			</view>

			<!-- <view class="order-box" v-if="userinfo.is_broker != 2"> -->
			<view class="order-box" v-if="false">
				<view class="flex-box mb35">
					<view class="fs34 col10 flex-grow-1">租房订单</view>
					<view class="fs24 col89" @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/sign_list/sign_list">查看更多+</view>
				</view>
				<view class="flex-box flex-between fs28 col7">
					<view @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/sign_list/sign_list">
						<image src="/static/icon/icon_order1.png" mode="aspectFill"></image>
						<view>全部</view>
					</view>
					<view @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/sign_list/sign_list?state=1">
						<image src="/static/icon/icon_order2.png" mode="aspectFill"></image>
						<view>待签约</view>
					</view>
					<view @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/sign_list/sign_list?state=2">
						<image src="/static/icon/icon_order3.png" mode="aspectFill"></image>
						<view>签约中</view>
					</view>
					<view @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/sign_list/sign_list?state=3">
						<image src="/static/icon/icon_order4.png" mode="aspectFill"></image>
						<view>待支付</view>
					</view>
					<view @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/sign_list/sign_list?state=4">
						<image src="/static/icon/icon_order5.png" mode="aspectFill"></image>
						<view>已成交</view>
					</view>
				</view>
			</view>
			<block v-if="userinfo.is_broker == 0">
			<view class="fs34 col10 fwb mb40">我的服务</view>
			<view class="nav-list flex-box flex-wrap">
				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/member/my_collection/my_collection">
					<image class="icon" src="/static/icon/icon_znav1.png" mode="aspectFit"></image>
					<view>我的收藏</view>
				</view>

				<!-- <navigator class="item mb40" url="#" hover-class="none">
					<image class="icon" src="/static/icon/icon_znav2.png" mode="aspectFit"></image>
					<view>我的消息</view>
				</navigator> -->


				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/home/help_you/help_you">
					<image class="icon" src="/static/icon/icon_znav3.png" mode="aspectFit"></image>
					<view>帮你找房</view>
				</view>


				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/member/my_team/my_team" v-if="false">
					<image class="icon" src="/static/icon/icon_znav4.png" mode="aspectFit"></image>
					<view>我的团队</view>
				</view>


				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/member/my_service/my_service" v-if="false">
					<image class="icon" src="/static/icon/icon_znav5.png" mode="aspectFit"></image>
					<view>我的服务</view>
				</view>

				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/member/invite/invite">
					<image class="icon" src="/static/icon/icon_znav6.png" mode="aspectFit"></image>
					<view>分享好友</view>
				</view>

				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/apply1/apply1" v-if="false">
					<image class="icon" src="/static/icon/icon_znav7.png" mode="aspectFit"></image>
					<view>我要卖房</view>
				</view>
				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/home/chatlist/chatlist">
					<image class="icon" src="/static/icon/jisuanqi.png" mode="aspectFit"></image>
					<view>房贷计算</view>
				</view>



				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/apply2/apply2" v-if="false">
					<image class="icon" src="/static/icon/icon_znav8.png" mode="aspectFit"></image>
					<view>申请经纪人</view>
				</view>

				<view class="item mb40" @click="jumpToPages" data-jump_type="3">
					<image class="icon" src="/static/icon/icon_znav9.png" mode="aspectFit"></image>
					<view>客服热线</view>
				</view>

				<navigator class="item mb40" url="/pages/member/setting/setting" hover-class="none">
					<image class="icon" src="/static/icon/icon_znav10.png" mode="aspectFit"></image>
					<view>设置</view>
				</navigator>
			</view>
			</block>
			
			<block v-if="userinfo.userprofile.is_broker == 2">
				<view class="fs34 col10 fwb mb40">经纪人管理</view>
				<view class="nav-list flex-box flex-wrap">
				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/manage_contract/manage_contract" v-if="false">
					<image class="icon" src="/static/icon/icon_znav11.png" mode="aspectFit"></image>
					<view>签约管理</view>
				</view>

				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/agent_house/agent_house" v-if="false">
					<image class="icon" src="/static/icon/icon_znav12.png" mode="aspectFit"></image>
					<view>代理房源</view>
				</view>

				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/manage_community/manage_community" v-if="false">
					<image class="icon" src="/static/icon/icon_znav13.png" mode="aspectFit"></image>
					<view>代理小区</view>
				</view>

				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/member/manage_house_ershoufang/manage_house_ershoufang">
					<image class="icon" src="/static/icon/icon_znav14.png" mode="aspectFit"></image>
					<view>我的房源</view>
				</view>

				<view class="item mb40" @click="jumpToPages" data-jump_type="2"  data-url="/pages/member/my_building/my_building" v-if="false">
					<image class="icon" src="/static/icon/icon_znav15.png" mode="aspectFit"></image>
					<view>楼盘管理</view>
				</view>

				<!-- <view class="item mb40" >
					<image class="icon" src="/static/icon/icon_znav16.png" mode="aspectFit"></image>
					<view>楼盘成交</view>
				</view> -->

				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/member/clients_sea/clients_sea" v-if="false">
					<image class="icon" src="/static/icon/icon_znav17.png" mode="aspectFit"></image>
					<view>客户公海</view>
				</view>

				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/member/my_clients/my_clients" v-if="false">
					<image class="icon" src="/static/icon/icon_znav19.png" mode="aspectFit"></image>
					<view>我的客户</view>
				</view>
				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/home/form/buyHouse">
					<image class="icon" src="/static/icon/icon_znav14.png" mode="aspectFit"></image>
					<view>二手房房源登记</view>
				</view>
				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/home/form/sellHouse">
					<image class="icon" src="/static/icon/icon_znav15.png" mode="aspectFit"></image>
					<view>新房来电来访表</view>
				</view>
				
				<navigator class="item mb40" url="/pages/member/setting/setting" hover-class="none">
					<image class="icon" src="/static/icon/icon_znav10.png" mode="aspectFit"></image>
					<view>设置</view>
				</navigator>
				
			</view>
			</block>
			<block v-if="userinfo.is_broker == 1">
				<view class="fs34 col10 fwb mb40">房东管理</view>
				<view class="nav-list flex-box flex-wrap">
					<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/manage_house/manage_house">
						<image class="icon" src="/static/icon/icon_znav14.png" mode="aspectFit"></image>
						<view>我的房源</view>
					</view>
					
					<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/manage_contract/manage_contract">
						<image class="icon" src="/static/icon/icon_znav11.png" mode="aspectFit"></image>
						<view>签约管理</view>
					</view>
					
					<navigator class="item mb40" url="/pages/member/setting/setting" hover-class="none">
						<image class="icon" src="/static/icon/icon_znav10.png" mode="aspectFit"></image>
						<view>设置</view>
					</navigator>
				</view>
			</block>
			<!-- <block v-if="userinfo.is_broker > 0"> -->
			<block v-if="false">
			<view class="fs34 col10 fwb mb40">其他管理</view>
			<view class="nav-list flex-box flex-wrap" >
				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/member/sign_in/sign_in">
					<image class="icon" src="/static/icon/icon_znav18.png" mode="aspectFit"></image>
					<view>积分签到</view>
				</view>

				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/member/my_collection/my_collection">
					<image class="icon" src="/static/icon/icon_znav1.png" mode="aspectFit"></image>
					<view>我的收藏</view>
				</view>

				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/member/my_team/my_team">
					<image class="icon" src="/static/icon/icon_znav4.png" mode="aspectFit"></image>
					<view>我的团队</view>
				</view>

				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/member/ques_list/ques_list" v-if="onOff">
					<image class="icon" src="/static/icon/icon_znav20.png" mode="aspectFit"></image>
					<view>我的提问</view>
				</view>
				
				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/rental/apply2/apply2">
					<image class="icon" src="/static/icon/icon_znav8.png" mode="aspectFit"></image>
					<view>申请经纪人</view>
				</view>

				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/member/invite/invite">
					<image class="icon" src="/static/icon/icon_znav6.png" mode="aspectFit"></image>
					<view>邀请好友</view>
				</view>

				<view class="item mb40" @click="jumpToPages" data-jump_type="3">
					<image class="icon" src="/static/icon/icon_znav9.png" mode="aspectFit"></image>
					<view>客服热线</view>
				</view>
				
				<view class="item mb40" @click="jumpToPages" data-jump_type="2" data-url="/pages/member/browse/browse">
					<image class="icon" src="/static/icon/icon_znav1.png" mode="aspectFit"></image>
					<view>浏览记录</view>
				</view>
				
			</view>
			</block>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	
	const functions = require('../../../utils/functions.js');
	export default {
		data() {
			return {
				iconback:'',
				userinfo:{},
				monthData:{},
				onOff:false,//显示隐藏
				token:'',
			}
		},
		onShow: function () {
			// 开关 1关 2开
			this.onOffFun();
			this.iconback = app.globalData.web_url + '/uploads/20241201/icon_back1.png'
			this.initData();
			app.setMessageBadge(false)
			this.token = uni.getStorageSync('token');
		},
		onPullDownRefresh: function () {
			uni.showNavigationBarLoading(); //在标题栏中显示加载
			
			var that = this; //模拟加载
			
			setTimeout(function () {
				that.initData();
				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1500);
		},
		methods: {
			onOffFun(){
				var that = this;
				
				var json = {
					
				};
				functions.getAjaxData('/api/xiluhouse/house/qa_switch', json, function (res) {
					that.onOff=(res.data.type==2)?true:false;//1关 2开
					console.log('1关 2开:'+res.data.type)
					console.log(that.onOff)
				}); 
			},
			jumpToPages(event) {
				var that = this;
				var jump_type = Number(event.currentTarget.dataset.jump_type);
				var url = event.currentTarget.dataset.url;
				if (jump_type == 1) {
					uni.navigateTo({
						url: url
					});
				} else if (jump_type == 2) {
					app.globalData.nowThat = this;
					functions.checkLogin(function (ret) {
						if (ret) {
							let arr = url.split("?");
							let params = 'is_broker='+that.userinfo.is_broker;
							if(arr.length==2){
								params = arr[1]+'&is_broker='+that.userinfo.is_broker
							}
							//console.log(url,params,arr);
							uni.navigateTo({
								url: arr[0]+'?'+params
							});
						} else {
							functions.toast('请先登录');
						}
					});
				} else if (jump_type == 3) {
					var tel = app.globalData.config.platform_contact_tel;
					functions.phoneCall({
						phoneNumber: tel //仅为示例，并非真实的电话号码
					});
				}
			},
			
			initData() {
				var that = this;
				//this.init_sign_score=app.globalData.config.init_sign_score;
				//this.draw_prize_discription=app.globalData.config.draw_prize_discription
				// if (!uni.getStorageSync('token')) {
				// 	this.sign_info= {
				// 			name: '您有积分待领取',
				// 			text: app.globalData.config.init_sign_score + '积分'
				// 		};
				// 	return false;
				// }
				
				functions.getAjaxData('/api/xiluhouse.user/index', {}, function (res) {
					app.globalData.userInfo = res.data;
					that.userinfo = res.data;
					if(res.data.is_broker>1){
						that.getMonthData()
					}
				});
			},
			
			getMonthData(){
				let that = this;
				
				let month = (new Date()).getMonth()+1;
				functions.getAjaxData('/api/xiluhouse.money/broker_lessor_statistics', {small_month:month}, function (res) {
					that.monthData = res.data;
				});
			}
					
		}
	}
</script>

<style scoped lang="less">
	.container {
		background-color: unset;
		min-height:auto;
	}

	.img-top-bg {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		display: block;
		width: 100%;
		height: auto;
		z-index: -1;
	}

	.user {
		padding: 50rpx 40rpx 35rpx;
		margin: 0 0 30rpx;
		background: #FFFFFF;
		box-shadow: 0 4rpx 30rpx 0 rgba(184, 189, 202, 0.3);
		border-radius: 20rpx;

		.img-head {
			display: block;
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
		}

		.id-box {
			padding: 0 24rpx;
			display: inline-flex;
			align-items: center;
			height: 55rpx;
			border-radius: 33rpx;
			font-size: 24rpx;
			line-height: 50rpx;
			text-align: center;

			image {
				margin: 0 10rpx 0 0;
				display: block;
				width: 30rpx;
				height: 30rpx;
			}
		}

		.id-box.id1 {
			color: #0091FF;
			border: 1px solid #0091FF;
		}

		.id-box.id2 {
			color: #08B89A;
			border: 1px solid #08B89A;
		}

		.id-box.id3 {
			color: #FE973D;
			border: 1px solid #FE973D;
		}
	}

	.data-box {
		padding: 30rpx 30rpx 40rpx;
		background: linear-gradient(93deg, #333E5E 0%, #1C2236 100%);
		border-radius: 20rpx;

		.icon-desc {
			margin-left: 15rpx;
			margin-top: 6rpx;
			display: block;
			width: 28rpx;
			height: 28rpx;
		}

		.nav-cash {
			width: 130rpx;
			height: 50rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			font-size: 24rpx;
			color: #333333;
			line-height: 50rpx;
			text-align: center;
		}
	}

	.info-box {
		margin: 0 0 30rpx;
		padding: 30rpx 30rpx 40rpx;
		box-shadow: 0 0 30rpx 5rpx rgba(184, 189, 202, 0.2);
		border-radius: 20rpx;
		background: #FFFFFF linear-gradient(180deg, rgba(0, 145, 255, 0.05) 0%, rgba(0, 145, 255, 0) 100%);
	}

	.order-box {
		margin: 0 0 30rpx;
		padding: 30rpx 30rpx 35rpx;
		background: #FFFFFF;
		box-shadow: 0 4rpx 30rpx 0 rgba(184, 189, 202, 0.3);
		border-radius: 20rpx;

		image {
			margin: 0 auto 25rpx;
			display: block;
			width: 45rpx;
			height: 45rpx;
		}
	}

	.nav-list {
		font-size: 26rpx;
		color: #555555;
		line-height: 28rpx;
		text-align: center;

		.item {
			width: 25%;
		}

		.icon {
			margin: 0 auto 30rpx;
			display: block;
			width: 50rpx;
			height: 50rpx;
		}
	}
</style>
